<template>
  <div>
    <x-card v-if="hasPerm('cookbookStore:page')">
      <div
        slot="content"
        class="table-page-search-wrapper"
      >
        <a-form layout="inline">
          <a-row :gutter="20">
            <a-col
              :md="7"
              :sm="24"
            >
              <a-form-item label="搜索">
                <a-input
                  v-model="queryParam.RecipeName"
                  allow-clear
                  placeholder="请输入菜谱名称"
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="7"
              :sm="24"
            >
              <a-button
                type="primary"
                @click="$refs.table.refresh(true)"
              >查询
              </a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </x-card>
    <a-card :bordered="false">
      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :rowKey="(record) => record.id"
        bordered
        @expand="handleExpand"
      >
        <template
          slot="operator"
          v-if="hasPerm('cookbookStore:add')"
        >
          <a-button
            icon="plus"
            type="primary"
            v-if="hasPerm('cookbookStore:add')"
            @click="$refs.addForm.add()"
          >新增
          </a-button>
        </template>
        <a-table
          v-if="record.detailTableData.length"
          slot="expandedRowRender"
          slot-scope="record"
          :columns="innerColumns"
          :data-source="record.detailTableData"
          :rowKey="(record) => record.id"
        >
          <!-- <p>111</p> -->
        </a-table>
        <span
          slot="action"
          slot-scope="record"
        >
          <a
            type="danger"
            v-if="hasPerm('cookbookStore:edit')"
            @click="$refs.editForm.edit(record)"
          >修改</a>
          <a-divider
            type="vertical"
            v-if="hasPerm('cookbookStore:edit') & hasPerm('cookbookStore:delete')"
          />
          <a-popconfirm
            v-if="hasPerm('cookbookStore:delete')"
            placement="topRight"
            title="确认删除？"
            @confirm="() => handleDelete(record.id)"
          >
            <a>删除</a>
          </a-popconfirm>
        </span>
      </s-table>
      <add-form
        ref="addForm"
        @ok="handleOk"
      />
      <edit-form
        ref="editForm"
        @ok="handleOk"
      />
    </a-card>
  </div>
</template>

<script>
import { cookBookStoreList, delCookBookStore, detailCookBookStore } from "@/api/modular/cookBook/cookBookManage";
import { STable, XCard } from "@/components";
import addForm from "@/views/cookbook/addForm";
import editForm from "@/views/cookbook/EditForm";

export default {
  name:'CookBook',
  components: {
    STable,
    XCard,
    addForm,
    editForm
  },
  data() {
    return {
      // 表头
      columns: [
        {
          title: "菜谱名称",
          dataIndex: "recipeName"
        },
        {
          title: "简写名称",
          dataIndex: "abbreviation"
        },
        {
          title: "操作",
          scopedSlots: { customRender: "action" },
          width: "200px"
        }
      ],
      innerColumns: [
        {
          title: "食物名称",
          dataIndex: "foodName"
        },
        {
          title: "食物重量(克)",
          dataIndex: "weight"
        }
      ],
      detailTableData: [],
      detailLoading: false,
      // 查询参数
      queryParam: {
        RecipeName: undefined
      },
      loadData: (parameter) => {
        return cookBookStoreList(Object.assign(parameter, this.queryParam)).then((res) => {
           this.$forceUpdate()
            return res.data;
        });
      }
    };
  },
  created() {
    console.log(this.$refs.table)
  },
  methods: {
    handleOk() {
      // this.$refs.table.refresh(true);
    },
    async handleDelete(id) {
      const { success, message } = await delCookBookStore([{ id }]);
      if (success) {
        this.$refs.table.refresh(true);
        this.$message.success("删除成功：" + message);
      } else {
        this.$message.error("删除失败：" + message);
      }
    },
    async handleExpand(expanded, record) {
      if (expanded) {
        const { data: data } = await detailCookBookStore({ recipesId: record.id });
        record.detailTableData = data.map(i => {return {
          foodName:i.foodMaterials.foodName,
          weight:i.weight
        }});
        this.$forceUpdate();
      }
    }
  }
};
</script>

<style>

</style>